<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>加中在线商城</title>
    <!--引入ElementUI的样式文件-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="index-container">
        <el-button type="primary" @click="getBooks">获取商品列表</el-button>
    </div>

<script src="js/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="js/axios.min.js"></script>

<script>
    //创建Vue对象
    new Vue({
        //指定VUE要渲染的元素(简单说:就是网页中那些位置可以使用VUE)
        el:'#index-container',
        /*
            Vue的数据区(属性区)
            你可以简单的认为是Java中的属性
        */
        data(){
            return{

            }
        },
        /**
         * VUE的方法区，此处存放的是方法
         * 你可以简单的理解为是Java中的方法
         * */
        methods:{
            /**
             * 获得商品列表
             */
            getBooks(){
                axios
                    //指定服务端处理器的路径
                    .get('books/queryBooks')
                /**
                 *  当请求和响应成功后自动执行then中的内容
                 *  response:这个对象很重要
                 *  当服务端处理成功后，将结果自动封装到该对象中
                 *  response对象包含两个重要信息:
                 *      1.data:其中的数据为服务端回传的我们主动查询的数据
                 *      2.status:状态码,200表示成功
                 */

                    .then((response)=>{
                           console.log(response.data);
                    })
                    //当请求或响应失败后自动执行catch中的内容
                    .catch((err)=>{
                        console.log(err);
                    });
            }
        }
    });

</script>


</body>
</html>